﻿@{
    ViewBag.Title = "产品库";
}
@model List<DataAccess.Models.ProductClass>
<div class="row" id="vm">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-12">
                <div class="main-box clearfix">
                    <header class="main-box-header clearfix">
                        <h2><span class="emerald">产品库</span></h2>
                    </header>
                    <div class="main-box-body clearfix">
                        <div id="search-form">
                            <div class="input-group">
                                <input type="text" id="search" placeholder="输入关键词查找推广产品" class="form-control input-lg" />
                                <div class="input-group-btn">
                                    <button class="btn btn-lg btn-primary" type="button" v-on:click="search">
                                        <i class="fa fa-search"></i> 搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="main-top">
                            <div class="goods-type-filter">
                                <div class="goods-type">
                                    <div class="goods-type-main" id="shopclass">
                                        @foreach (var item in Model)
                                        {
                                            <span><a href="#" onclick="ClassSearch(@item.ID,this)">@item.Name<b> (@item.Count) </b></a></span>
                                        }
                                    </div>
                                </div>
                            </div>
                            <div class="goods-pages">
                                <div class="goods-pages-fil clearfix">
                                    <span data-px="zh" id="zhonghe" class="pxclick cur" onclick="Order(1,this)"><a href="javascript:void(0);">综合</a></span>
                                    <span data-px="zx" class="pxclick " onclick="Order(2, this)"><a href="javascript:void(0);">最新</a></span>
                                    <span data-px="sell" class="pxclick " onclick="Order(3, this)"><a href="javascript:void(0);">销量</a></span>
                                    <span data-px="yjdown" class="pxclick " onclick="Order(4, this)"><a href="javascript:void(0);">佣金比例</a></span>
                                    <span data-px="jgup" class="pxclick " onclick="Order(5, this)"><a href="javascript:void(0);">价格</a></span>
                                </div>
                            </div>
                        </div>

                        <ul id="search-results">
                            <li></li>
                            <li id="productlist">
                                <div class="col-xs-6 col-sm-3" style="vertical-align:top; float:none;display:inline-block" v-on:click="tao(item.auctionId)" v-for="(item,index)  in List">
                                    <div class="item" style="margin-bottom: 10px; zoom: 1; opacity: 1;">
                                        <i class="bao_icon" v-if="item.biz30day>1000"></i>
                                        <a><img v-bind:src="item.pictUrl" style="width: 100%; height: auto;"></a>
                                        <div class="tweet-wrapper">
                                            <p class="jzp_title" v-html="item.title"></p>
                                            <p class="jzp_discount">
                                                ￥<span class="price">{{item.Price}}</span>
                                                <span class="Commission"><span>佣金</span><span>{{item.tkRate}}%</span></span>
                                            </p>
                                            <p class="shop" v-if="item.userType==='0'"><ins class="tao_icon"></ins>{{item.shopTitle}}</p>
                                            <p class="shop" v-if="item.userType==='1'"><ins class="T_icon"></ins>{{item.shopTitle}}</p>
                                            <p class="Coupon"><ins class="coupon_icon"></ins>出售<b>{{item.biz30day}}</b>件，优惠劵<b>{{item.couponAmount}}</b>元</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="dialog_content" class="dialog_content" style="display:none">
    <div class="dialogModal_header"><h4 class="modal-title">查看商品</h4></div>
    <div class="modal-body" id="goods">
    </div>
</div>
@section Scripts{
    <link rel="stylesheet" type="text/css" href="/css/quan_index.css">
    <script src="/Scripts/sys/lib/common_raw.js"></script>
    <script src="http://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
    <script src="/Scripts/plugins/layer/layer.min.js"></script>
    <script src="~/js/popModal.min.js"></script>
    <link href="~/css/popModal.min.css" rel="stylesheet" />
<script src="https://cdn.bootcss.com/clipboard.js/1.6.1/clipboard.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#vm",
            data: {
                maxCount: "1",
                List: [],
            },
            methods: {
                search: function () {
                    SearchWord = $.trim($("#search").val());
                    cid = 0;
                    CurrentIndex = 0;
                    UpdateOrder();
                    $("#shopclass").find("span").removeClass("label-large").removeClass("label-danger");
                    $("#productlist").html("");

                    list();

                }
            }
        })

        var cid = 0;
        var SearchWord = "";
        var CurrentIndex = 0;
        var orderby = 0;
        document.onkeydown = function () {
            if (event.keyCode == 13) {
                if ($.trim($("#search").val()) != "") {
                    SearchWord = $.trim($("#search").val());
                    cid = 0;
                    CurrentIndex = 0;
                    UpdateOrder();
                    $("#shopclass").find("span").removeClass("label-large").removeClass("label-danger");
                    $("#productlist").html("");
                    list();

                }
            }
        }
        function ClassSearch(b, b2) {

            $("#shopclass").find("span a").removeClass("red");
            $(b2).addClass("red");
            UpdateOrder();
            CurrentIndex =0;
            cid = b;
            SearchWord = "";
            $("#search").val("");
            $("#productlist").html("");
            list();
        }
        function list() {

            common.invokeApi(
                    "post",
                    "/Product/GetProducts?offset=" + (CurrentIndex+1) + "&cid=" + cid + "&key=" + (encodeURIComponent(SearchWord)) + "&oid=" + orderby,
                     {},
                    function () { },
                    function (data) {
                        if (data.rows.CurrentPageList != null) {
                            vm.maxCount = data.rows.Total;
                            for (var i = 0; i < data.rows.CurrentPageList.length; i++) {
                                vm.List.push(data.rows.CurrentPageList[i]);
                            }
                        }
                    },
                    function (data) {
                        common.msg(data.Message, 2, function () { });
                    },
                    function () { }
                    );
        }
        $(function () {

            list();
        });
        function scrollFn()
        {

            var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
            var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
            var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            if (pageHeight - viewportHeight - scrollHeight < 1) {
                var totalPages = Math.ceil(vm.maxCount / 20);
                CurrentIndex++;
                if (CurrentIndex > totalPages) {
                    return;
                }

                list();
            }
        }
        window.addEventListener("scroll", scrollFn);

        function UpdateOrder() {
            $(".goods-pages-fil").find("span").removeClass("cur");
            $("#zhonghe").addClass("cur");
            orderby = 0;
        }
        function Order(id, obj) 
        {
            $(".goods-pages-fil").find("span").removeClass("cur");
            $(obj).addClass("cur");
            $(".goods-pages-fil").find("span").each(function ()
            {
                if($(this).attr("data-px")=="sell"){
                    $(this).find("a").html("销量");
                }
                if($(this).attr("data-px")=="yjdown"){
                    $(this).find("a").html("佣金比例");
                }
                if($(this).attr("data-px")=="jgup"){
                    $(this).find("a").html("价格");
                }
            })
            $("#productlist").html("");
            switch (id) {
                case 3:
                    $(obj).find("a").html("销量从高到底");
                    break;
                case 4:
                    $(obj).find("a").html("佣金比例从高到底");

                    break;
                case 5:
                    $(obj).find("a").html("价格从低到高");
                    break;
            }
            CurrentIndex = 0;
            orderby = id;
            list();
        }
        function tao(id) 
        {
            if (id != "" && id != 0)
            {
                common.invokeApi(
                        "post",
                        "/Product/Goods?id=" + id,
                         {},
                        function () { },
                        function (dd) 
                        {
                            if (dd.rows != null)
                            {
                                var d = dd.rows;
                                var html = "<div class=\"form-group\" style=\"position: relative;left: 0;top: 0;\">"+
            "<img class=\"shopImges\" src=\"" + d.pictUrl + "\" />" +
            "<h6>" + d.title + "</h6>" +
            (d.userType === 0 ? "<p  class=\"shop\"><ins class=\"tao_icon\"></ins>" + d.shopTitle + "</p>" : "<p class=\"shop\"><ins class=\"T_icon\"></ins>" + d.shopTitle + "</p>")+
            "<p class=\"PriceClass\"><span>价格：</span><span class=\"money\"></span><span class=\"label label-danger\">￥" + d.Price + "</span><span class=\"Original\">￥" + d.zkPrice + "</span><span class=\"showhide\">（月销量<b>" + d.biz30day + "</b>件）</span></p>" +
            "<p class=\"PriceClass\"><span>优惠：</span><span class=\"money\"></span><span class=\"label label-primary\">￥" + d.couponAmount + ".00</span><span class=\"showhide\">（优惠券已被领取"+Math.floor(d.couponTotalCount * 100) +"%）</span></p>" +
            "<p class=\"PriceClass\"><span>佣金：</span><span class=\"money\"></span><span class=\"label label-success\">￥" + d.Rate.toFixed(2) + "</span><span class=\"showhide\">（收入比率<b>" + d.tkRate + "%</b>）</span></p>" +
            "<div class=\"PriceClass\">"+
               "<a href=\"" + d.auctionUrl + "\" target=\"_blank\" class=\"btn btn-danger\">商品链接</a> " +
                "<a href=\"https://uland.taobao.com/coupon/edetail?tj1=1&tj2=1&activityId=" + d.couponActivityId + "&itemId=" + d.auctionId + "&dx=1\" target=\"_blank\" class=\"btn btn-info\">" + d.couponAmount + "元优惠劵</a> " +
               "<a href=\"javascript:;\" id='wxtg' onclick='tuiguang(1,"+id+")' class=\"btn btn-success\">微信推广</a> " +
                "<a href=\"javascript:;\" id='qqtg' onclick='tuiguang(2,"+id+")'  class=\"btn btn-success\">QQ推广</a> " +
                "<a href=\"javascript:;\" onclick='copy(this)' id='copyid' class=\"btn btn-default\">复制文案</a> " +
            "</div>"+
            "<div class=\"PriceClass\" style='display: block; height: 100px;color: #555;font-size: 12px;resize: none; border: 0; background: 0; word-break: break-all'>"+
                "<textarea id='textareaid' class='taodetail'>"+d.title+
                "\n券后【"+ d.Price+"元】包邮秒杀"+
                "\n领券：https://uland.taobao.com/coupon/edetail?tj1=1&tj2=1&activityId="+d.couponActivityId+"&itemId="+d.auctionId+"&dx=1"
                +"\n下单："+d.auctionUrl+
                "\n"+d.Introduce
                +"</textarea>"+
                                "</div>"+
                                    "<div class=\"PriceClass validity\">* 优惠券有效期<span>"+d.couponEffectiveStartTime+"</span>~<span>"+d.couponEffectiveEndTime+"</span></div>"+
                                "</div> ";
                                $("#goods").html(html);
                                $('.dialog_content').dialogModal({

                                });
                            }
                        },
                        function (data) {
                            common.msg(data.Message, 2, function () { });
                        },
                        function () { });
            }

        }
        function tuiguang(id,pid){
            $(".taodetail").val("正在生成推广信息.................");
            $("#wxtg").remove();
            $("#qqtg").remove();
            $("#wxtg").remove();
            $("#qqtg").remove();
            common.invokeApi(
                       "post",
                       "/Product/Kouling?id=" + id+"&pid="+pid,
                        {},
                       function () { },
                       function (dd) {
                           if (dd.date != null) {
                               //document.getElementById("textareaid").innerHTML= dd.date;
                               //document.getElementById('textareaid').innerText=dd.date;  
                              
                               $(".taodetail").val(dd.date);
                           }
                       },
                       function (data) {
                           common.msg(data.Message, 2, function () { });
                       },
                       function () { });
        }

        function copy(obj)
        {
          
            $(obj).addClass("btn-success");
            $(obj).addClass("btn-success");
            $(obj).html("已复制");
            var clipboard = new Clipboard('#copyid', {
                text: function (trigger) {
                    return  $(".taodetail").val();
                }
            });
           
            setTimeout(function () {
                $(obj).removeClass("btn-success");
                $(obj).html("复制文案");
            }, 1500);
        }
       
    </script>
}

